<template>
    <div class="list">
           <div class="list-nav"> 
               <div class="nav" v-for="(item,index) in list" :key="index" @click="mysort(index)"  >{{item}}</div>
            </div>
           <!-- <img src="../pic.png" alt=""> -->
          
                  <div class="block" v-for="(item,index) in Arr" :key="index">
                <div><img :src="item.pic" alt=""></div>
                <div class="weng">
                    <span>售价：{{item.value}}</span>
                    <span> {{item.title}}</span>
                   
                </div>
           
           </div>
         
    </div>
</template>

<script>
var pic = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F26%2F20210226073347_50f94.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668240950&t=a5e75c663474fbf7b874b9e7a9324adf';
// import a  from "../"
export default {
    
      data() {
          return {
              Arr:[
                  {pic:pic,value:350,title:"金马刀削面"},
                  {pic:pic,value:200,title:"火锅"},
                  {pic:pic,value:400,title:"烤肉"}
              ],
              list:["综合排序","距离最近","销量最高","筛选"],
             
          }
      },
       methods: {
               
                  mysort(index){
                        if(index == 3){
                            this.Arr.sort((a,b)=>{
                                return a.value - b.value
                            })
                        }
                  
             },
        
                 
     },
  
}
</script>

<style>
   *{
       margin: 0;
       padding: 0;

   }
   .list-nav{
       width: 100%;
       height: 30px;
       display: flex;
       /* justify-content: center; */
       justify-content: space-around;
   }
   .nav{
       height: 30px;
   }

   .block{
       width: 90%;
       height: 100px;
       display: flex;
       margin-top: 20px;
       margin-left: 20px;
       /* justify-content: center; */
   }
   .block img{
       width: 100px;
   }
   .weng{
       margin-left: 20px;
   }
   .weng span{
       display: block;
       /* flex-direction: row; */
   }
   .weng span:last-child{
       margin-top: 60px;
       color: rgb(212, 160, 95);
   }
   .list .nav{
       padding: 10px;
       /* margin: 4px 5px; */
       text-align: center;
       color: #999;

   }
</style>